<template>
  <div>
    <p>子组件--数据信息：dataDescription:{{ dataDescription }} data2:{{ data2 }}</p>
    <p>接收到父组件传递的数据信息：id:{{ id }} flag:{{ flag }} data:{{ data }}</p>
    <a-space size="middle">
      <a-input
        v-model:value="dataDescription"
        size="small"
        show-count
        :maxlength="100"
        placeholder="输入文本信息时自动获取输入值"
        allow-clear
      />
      <a-button type="primary" @click="getChildInput1(dataDescription)"
        >点击将子组件中的数据传递值父组件</a-button
      >
      <a-button type="primary" @click="generateData"
        >先点击此按钮自动生成传递至父组件的数据</a-button
      >
      <a-button type="primary" @click="getChildInput2(data2)"
        >点击将子组件中的数据传递值父组件</a-button
      >
      <a-button type="primary" @click="generateDataAndSendToParent"
        >生成数据并传递至父组件</a-button
      >
      <a-button type="primary" @click="$emit('parentComponentMethod', data2.time)"
        >$emit调用父组件事件</a-button
      >
      <a-button type="primary" @click="callParentComponentMethod"
        >context.emit调用父组件事件</a-button
      >
    </a-space>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, reactive } from 'vue';
  import { TimeAndFlagDataModel } from './data';
  import { message } from 'ant-design-vue';

  export default defineComponent({
    name: 'DemoChildComponent',
    //子组件中使用props接收父组件传递的数据，可以直接使用
    props: {
      id: {
        type: String,
        //使用required指定必须传值
        required: true,
      },
      flag: {
        type: Boolean,
      },
      data: {},
      getChildInput1: Function,
      getChildInput2: Function,
    },
    //要再setup函数中获取或使用props，需要在setup函数中获取props对象
    setup(props, context) {
      // setup() {
      console.log('Demo(使用setup函数)--组件props--子组件/页面 setup 函数 执行了。');
      //在setup函数中使用props中的内容无法使用，需要在setup函数中传入props
      // console.log('get parent data,id:' + id + ' flag:' + flag + ' data:' + data);
      console.log('get parent data,id:' + props.id + ' flag:' + props.flag + ' data:' + props.data);

      //定义接收子组件界面中输入值，作为动态数据传递给父组件
      const dataDescription = ref('默认输入值');
      const data2: TimeAndFlagDataModel = reactive({
        time: new Date(),
        flag: new Date().getSeconds() % 3 > 1,
      });

      function generateData() {
        var now = new Date();
        data2.time = now;
        data2.flag = now.getSeconds() % 3 > 1;
      }

      function generateDataAndSendToParent() {
        var now = new Date();
        data2.time = now;
        data2.flag = now.getSeconds() % 3 > 1;
        props.getChildInput2(data2);
      }

      //调用父组件中的事件方法
      function callParentComponentMethod() {
        context.emit('parentComponentMethod', data2.time);
      }

      //按正常方法定义，定义1个弹出提示方法，用于父组件调用子组件方法验证
      // function showMessageMethod(data) {
      //   message.info('子组件中提示信息：父组件调用子组件方法，参数为：' + data, 5);
      // }
      const showMessageMethod = (event) => {
        message.info('子组件中提示信息：父组件调用子组件方法，参数为：', 5);
      };

      return {
        dataDescription,
        data2,
        generateData,
        generateDataAndSendToParent,
        callParentComponentMethod,
        showMessageMethod,
      };
    },
  });
</script>
<style scoped></style>
